﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutChild.cshtml";
}
@section head
 {
    <link href="@Url.Content("~/Content/zTreeStyle3.4/zTreeStyle.css")" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        
        table, table td, table th
        {
            border-collapse: collapse;
            font-size: 12px;
        }
        table
        {
            table-layout: fixed;
        }
        .tdcenter
        {
            text-align: center;
        }
        td
        {
            white-space: nowrap;
            display: table-cell;
            vertical-align: inherit;
            border: 1px solid #000000;
            padding: 5px;
        }
        
        
        .tree_parent
        {
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            padding-left: 2px;
        }
        .ico_open
        {
            background: url(/Content/zTreeStyle3.4/img/zTreeStandard.gif) -92px -52px;
            width: 16px;
            height: 16px;
            display: inline-block;
            cursor: pointer;
        }
        .ico_close
        {
            background: url(/Content/zTreeStyle3.4/img/zTreeStandard.gif) -74px 2px;
            width: 16px;
            height: 16px;
            display: inline-block;
            cursor: pointer;
        }
        
        .level0
        {
            font-size: 12px;
            padding-left: 20px;
            height: 18px;
        }
        .level0 .ico
        {
            background: url(/Content/zTreeStyle3.4/img/zTreeStandard.gif) -62px -16px;
            width: 16px;
            height: 18px;
            display: inline-block;
            line-height: 18px;
            font-size: 12px;
        }
        
        .ico a
        {
            text-decoration: none;
            color: #000000;
        }
        .ico a:hover
        {
            color: red;
        }
        
        .select
        {
        }
        
        .t1
        {
            white-space: nowrap;
            text-overflow: ellipsis; /* for internet explorer //#FF6600;*/
            overflow: hidden;
            display: inline-block;
            padding: 2px 0px 0px 15px;
        }
        .ui-layout-resizer-south
        {
            background: #edfeea;
        }
        .ui-layout-resizer-east
        {
            background: #edfeea;
        }
        .ui-layout-toggler-east
        {
            background: #cee2a3;
        }
        .ui-layout-toggler-south
        {
            background: #cee2a3;
        }
        .east-south
        {
            padding: 0px;
        }
        .east-south span
        {
            padding: 4px 8px 4px 2px;
            font-weight: bold;
            cursor: default;
        }
        .east-east
        {
            padding: 0px;
        }
        .east-east div
        {
            padding: 2px;
            font-weight: bold;
            cursor: default;
        }
        
        .btndiv
        {
            padding: 4px;
            border: 1px solid #999999;
            margin-left: 4px;
            cursor: pointer;
        }
        .btnselect
        {
            padding: 4px;
            border: 1px solid #999999;
            background: #edfeea;
            margin-left: 4px;
            cursor: pointer;
            color: red;
        }
        .tablecontent td
        {
            border: 0px;
            margin: 0px;
            padding: 0px;
            line-height: 20px;
        }
        .tablecontent tr
        {
            height: 10px;
        }
    </style>
    <script src="@Url.Content("~/Scripts/FusionCharts.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ztree.all-3.4.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        var eastLayout;
        var reportid = '@ViewBag.ReportID';
        var cycle = "@ViewBag.CYCLE";
        $(document).ready(function () {
            eastLayout = $('div.ui-layout-center').layout({
                minSize: 0
			, center__paneSelector: ".east-center"
			, south__paneSelector: ".east-south"
            , east__paneSelector: ".east-east"
            , initClosed: false
            , south__size: 50
            , east__size: 100
            });
            loadyear();
            loadmonth();
            loaddefautdate();
            loadzb();

            $(".ico_open").click(function () {
                if ($(this).attr('class') == "ico_open") {
                    $(this).attr('class', "ico_close")
                }
                else {
                    $(this).attr('class', "ico_open")
                }
                $(this).parent().next().slideToggle();
            });
            loadOrganizationNoCheckParent(true); //checkenable 节点前有复选框

        });

        function loaddefautdate() {
            var year, month, season, nb_year, jb_year, jb_season, yb_year, yb_month;
            var myDate = new Date();
            year = myDate.getFullYear();
            month = myDate.getMonth() + 1; //月份默认从0开始
            season = Math.ceil(month / 3);

            if (cycle == "01") {
                if (month == 1) {
                    yb_year = year - 1;
                    yb_month = 12;
                }
                else {
                    yb_year = year;
                    yb_month = month - 1;
                    if (yb_month < 10)
                        yb_month = '0' + yb_month;
                }
                $("#yearselect").val(yb_year);
                $("#monthselect").val(yb_month);
                $("#monthendselect").val(yb_month);

            } else if (cycle == "02") {
                if (season == 1) {
                    jb_year = year - 1;
                    jb_season = '16';
                }
                else {
                    jb_year = year;
                    jb_season = 12 + season - 1;
                }
                $("#yearselect").val(jb_year);
              
                $("#monthselect").val(jb_season);
                $("#monthendselect").val(jb_season);

            }
            else {
                nb_year = year - 1;
                $("#yearselect").val(nb_year);
              

            }


        }

        function loadyear() {
            var yearselect = $("#yearselect");
            var myDate = new Date();
            var startyear = myDate.getFullYear() - 5;
            var endyear = myDate.getFullYear() + 2
            for (var i = startyear; i <= endyear; i++) {
                var option = $("<option>").text(i + "年").val(i);
                yearselect.append(option);
            }
            $("#yearselect option[value='" + myDate.getFullYear() + "']").attr("selected", true)
        }
        function loadmonth() {
            var monthselect = $("#monthselect");
            monthselect.change(function () {
                ReportCompute();
            });
            var monthendselect = $("#monthendselect");
            monthendselect.change(function () {
                ReportCompute();
            });
            if (cycle == "01") {
                $("#cycle_month1").show();
                $("#cycle_month2").show();
                $("#whichTime").text("月份:")
                for (var i = 1; i < 13; i++) {
                    var option = $("<option>").text(i + "月").val(i < 10 ? ('0' + i) : i);
                    monthselect.append(option);
                }
            }
            else if (cycle == "02") {
                $("#cycle_month1").show();
                $("#cycle_month2").show();
                $("#whichTime").text("季度:")
                for (var i = 13; i < 17; i++) {
                    var option = $("<option>").text("第" + (i - 12) + "季度").val(i)
                    monthselect.append(option);
                }
            }
            else {
                $("#cycle_month1").hide();
                $("#cycle_month2").hide();
            }

            monthendselect.html(monthselect.html());
        }
        function zTreeOnClick(event, treeId, treeNode, clickFlag) {
//            curSelectNode = treeNode;

        }
        function zTreeMenuCheck(event, treeId, treeNode) {
            var nodes = treeObj.getCheckedNodes(true);
            var OrgIds = "";
            var OrgName = "";
            for (var i = 0; i < nodes.length; i++) {
                OrgIds += nodes[i].ID + ",";
                OrgName += nodes[i].NAME + ",";
            }
            if (OrgIds.length > 0) {
                OrgIds = OrgIds.substring(0, OrgIds.length - 1); //把最后一个逗号去掉
                OrgName = OrgName.substring(0, OrgName.length - 1); //把最后一个逗号去掉
                $("#dwtreecontent").val(OrgName);
                $("#orgid").val(OrgIds);
            }
            //            if (treeNode.checked) {
            //                $("#dwtreecontent").html($("#dwtreecontent").html()+" "+treeNode.NAME);
            //            }
            //            else {
            //                //$("#dwtreecontent").html($("#dwtreecontent").html() + " " + treeNode.NAME);
            //            }
        }
        function zTreeOnAsyncSuccess(event, treeId, treeNode) {
            treeObj = $.fn.zTree.getZTreeObj(treeId);
            $("#tree_load").hide();
        }


        function loadzb() {
           
            $.ajax({
                type: "POST",
                url: "/DataManage/ReportAnalyse/GetReportTarget?reportid=@ViewBag.ReportID",
                success: function (msg) {
                    var data = eval(msg);
                    $.each(data, function (index, d) {
                        $("#ZbContent").append("<div class='level0'><span class='ico icozb'><a href='javascript:void(0)' class='t1'>" + d.NAME + "</a></span></div>");
                    })

                    loadwd();
                }
            });
        }

        function loadwd() {
            $.ajax({
                type: "POST",
                url: "/DataManage/ReportAnalyse/GetReportLatitude?reportid=@ViewBag.ReportID",
                success: function (msg) {
                    var data = eval(msg);
                    $.each(data, function (index, d) {
                        $("#WdContent").append("<div class='level0'><span class='ico icowd'><a  href='javascript:void(0)'  class='t1'>" + d.NAME + "</a></span></div>");
                    })
                    loadEvent();
                }
            });
        }
        function loadEvent() {
            $("#westcontainer .ico").draggable({
                appendTo: "body",
                helper: "clone",
                zIndex: 100
            });
            $("#zb_panel").droppable({
                accept: ".icozb",
                drop: function (event, ui) {
                    $("#zb_panel").append("<div>" + ui.draggable.text() + "</div>");
                    ReportCompute();
                }
            });
            $("#wd_panel").droppable({
                accept: ".icowd",
                drop: function (event, ui) {
                    $("#wd_panel").append("<span>" + ui.draggable.text() + "</span>");
                    ReportCompute();
                }
            });

            $("#wd_panel").sortable({
                revert: true,
                stop: function (event, ui) {
                    ReportCompute();
                }

            });
            $("#zb_panel").sortable({
                revert: true,
                stop: function (event, ui) {
                    ReportCompute();
                }

            });
            //$("#chart_container").resizable();
            //            $("#chart_container").resizable({
            //                helper: "ui-resizable-helper"
            //            });
        }

        function ReportCompute() {

            var OrgIds = $("#orgid").val();
            if (OrgIds == "") {
                return;
            }

            var yearstr = $("#yearselect").val();
            var monstr = $("#monthselect").val();
            var monendstr = $("#monthendselect").val();
            if (monstr > monendstr) {
                alert("开始日期不能大于结束日期");
                return;
            }
            if ($("#wd_panel").children().length > 0 && $("#zb_panel").children().length > 0) {
                var wdstr = "";
                var zbstr = "";
                $("#zb_panel div").each(function (i) {
                    zbstr = zbstr + $(this).html() + ",";
                });
                $("#wd_panel span").each(function (i) {
                    wdstr = wdstr + $(this).html() + ",";
                });
                $.ajax({
                    type: "POST",
                    url: "/DataManage/ReportAnalyse/ReportCompute",
                    data: "year=" + yearstr + "&month1=" + monstr + "&month2=" + monendstr + "&zb=" + encodeURI(zbstr) + "&wd=" + encodeURI(wdstr) + "&reportid=" + reportid + "&dwid=" + OrgIds, // "zb=" + zbstr + "&wd="+wdstr+"&reportid="+reportid,
                    success: function (msg) {
                        $("#table_container").html(msg);
                        loadchart();
                    }
                });
            }
        }

        function loadchart() {
            //根据表格分析开始、结束列。
            rowhead = 1;
            colhead = $("#TableMain tr:eq(0) td[sx='wd_title']").eq(0).index() + 1;
            rowheadstart = $("#TableMain tr:eq(0) td[sx='zb']").eq(0).index() + 1;
            rowheadend = $("#TableMain tr:eq(0) td[sx='zb']").last().index() + 1;
            colheadstart = $("#TableMain td[sx='wd']").first().parent().index() + 1;
            colheadend = $("#TableMain td[sx='wd']").last().parent().index() + 1;
            var returnValue = rowhead + "|" + colhead + "|" + rowheadstart + "|" + rowheadend + "|" + colheadstart + "|" + colheadend + "|" + showhead + "|" + showdata + "|1";
            chart(returnValue);
//            if (isshowchart) {
                //var returnValue = rowhead + "|" + colhead + "|" + rowheadstart + "|" + $("#TableMain tr:eq(1) td").length + "|" + colheadstart + "|" + $("#TableMain tr").length + "|" + showhead + "|" + showdata + "|1";
//                var returnValue = "1|1|2|" + $("#TableMain tr:eq(1) td").length + "|2|" + $("#TableMain tr").length + "|1|1|1";
//                chart(returnValue);
//            }

        }

        function showdwtree(obj) {
            if ($("#org_tree").css("display") == "none")
                $("#org_tree").show();
            else
                $("#org_tree").hide();
        }
        function hidedwtree() {
            if ($("#org_tree").css("display") == "block") {
                $("#org_tree").hide();
                ReportCompute();
            }
        }
    </script>
}
<!--头部导航,不用时可以去掉-->
<div class="ui-layout-north" id='toolbar'>
    <div style="float: left; height: 34px; line-height: 36px; margin-right: 20px;">
        单位:
        <div style="position: absolute; left: 27px; top: 6px; width: 250px; height: 20px;
            line-height: 20px; border: 1px solid #7f9db9; background: #ffffff;">
            <input id="dwtreecontent" type="text" style="width: 100%; border: 0px;" /><input
                type="hidden" id="orgid" value="" /><span style='position: absolute; right: 0px;
                    top: 0px; width: 17px; height: 18px; cursor: pointer; background: url(/Content/windropdown.gif) no-repeat 1px 1px;'
                    onclick="showdwtree(this)"></span>
        </div>
        <div style="position: absolute; left: 290px; top: 6px;">
            <table class="tablecontent">
                <tr>
                    <td style="width: 30px; font-weight: bold; text-align: right;">
                        年度:
                    </td>
                    <td>
                        <select style='width: 80px;' id="yearselect">
                        </select>
                    </td>
                    <td style="width: 30px; font-weight: bold; text-align: right;" id="cycle_month1">
                        <div id="whichTime">
                            月份:</div>
                    </td>
                    <td id="cycle_month2">
                        <select id="monthselect">
                        </select>至<select id="monthendselect"></select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="buttonlist" style="float: right; height: 34px; line-height: 36px; margin-right: 20px;">
        <a onclick="showchart()" class="button green"><span class="icon-botton" style="background: url('/Content/16/chart_bar.png') no-repeat scroll 0px 4px;">
        </span>图表设置</a>
    </div>
</div>
<div id="org_tree" style="position: absolute; left: 27px; top: 26px; z-index: 10000;
    width: 250px; height: 500px; background: #ffffff; overflow: auto; border: 1px solid #7f9db9;
    display: none;">
    <div id="tree_load">
        正在加载,请稍后...</div>
    @Html.Partial("_OrganizationCheckTree")

</div>
<!--左侧导航，不用时直接去掉-->
<div class="ui-layout-west" id="westcontainer">
    <div class="tree_parent">
        <span class='ico_open'></span><span class="title12">指标</span></div>
    <div id="ZbContent">
    </div>
    <div class="tree_parent">
        <span class='ico_open'></span><span class="title12">维度</span></div>
    <div id="WdContent">
    </div>
</div>
<!--主窗体，页面都需要的div-->
<div class="ui-layout-center" style="overflow: auto;" onclick="hidedwtree()">
    <div class="east-center" id="centercontainer" style="border-left: 0px; border-right: 1px solid #adcb97;
        border-top: 0px; border-bottom: 1px solid #adcb97; overflow: auto;background: url(/Content/images/bj.gif); ">
        <div id="table_container" style='text-align: left; padding-top: 5px;' >
        </div>
        <div id="chart_container" style='text-align: left; padding-top: 5px;padding-left:10px;'>
        </div>
        <div id="chart_btndiv" style='text-align: left; padding-top: 5px;padding-left:10px;'>
        </div>
    </div>
    <div class="east-south" id="wd_panel" style="border-left: 0px solid #adcb97; border-right: 0px;
        border-bottom: 0px; border-top: 1px solid #adcb97; overflow: hidden;background: url(/Content/images/bj.gif);">
    </div>
    <div class="east-east" id="zb_panel" style="border-left: 1px solid #adcb97; border-right: 0px;
        border-bottom: 1px solid #adcb97; border-top: 0px solid #aed0ea; overflow: hidden;background: url(/Content/images/bj.gif);">
    </div>
</div>
